/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */


// 准备查询参数对象，其他功能可能操作，所以全局
const queryObj = {
  status: '', // 文章状态，1-待审核，2-审核通过，空字符串-全部
  channel_id: '', // 频道id，空字符串-全部
  // 后端自动分页返回数据
  page: 1, // 当前页码
  per_page: 2, // 每页条数
}
let totalCount = 0; // 保存文章总条数

// 获取展示
async function setArticleList() {
  try {
    const res = await axios({
      url: '/v1_0/mp/articles',
      params: queryObj
    })
    // console.log(res);
    const htmlStr = res.data.results.map(item => 
      `<tr>
        <td>
          <img
            src="${item.cover.type === 0 ? 'https://img2.baidu.com/it/u=2640406343,1419332367&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500' : item.cover.images[0]}"
            alt="">
        </td>
        <td>${item.title}</td>
        <td>
          ${item.status === 1 ? '<span class="badge text-bg-primary">待审核</span>' : '<span class="badge text-bg-success">审核通过</span>'}
        </td>
        <td>
          <span>${item.pubdate}</span>
        </td>
        <td>
          <span>${item.read_count}</span>
        </td>
        <td>
          <span>${item.comment_count}</span>
        </td>
        <td>
          <span>${item.like_count}</span>
        </td>
        <td data-id="${item.id}">
          <i class="bi bi-pencil-square edit"></i>
          <i class="bi bi-trash3 del"></i>
        </td>
      </tr>`
    ).join('');
    document.querySelector('.art-list').innerHTML = htmlStr;
    // 总条数
    totalCount = res.data.total_count;
    document.querySelector('.total-count').innerHTML = `共 ${totalCount} 条`;
    // 当前页，qs获取第一个
    document.querySelector('.page-now').innerHTML = `第 ${queryObj.page} 页`
  } catch(error) {
    // console.dir(error);
    alert(error.message);
  }
}
setArticleList()
/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
// 设置频道列表数据
async function setChannelList() {
  const res = await axios({
    url: '/v1_0/channels'
  });
  const htmrStr = '<option value="" selected>请选择文章频道</option>' + res.data.channels.map(item => `<option value="${item.id}" >${item.name}</option>`).join('');
  document.querySelector('.form-select').innerHTML = htmrStr;
}
// 网页运行后默认调用
setChannelList();

// 监听筛选条件改变，保存查询信息到查询参数对象
/* document.querySelector('.sel-btn').addEventListener('click', () => {
  const form = document.querySelector('.sel-form');
  const data = serialize(form, {hash: true, empty: true});
  console.log(data);
  queryObj.status = data.status;
  queryObj.channel_id = data.channel_id;
  console.log(queryObj)
  setArticleList();
}) */
// 为了防止不点击筛选，直接点击分页，而不匹配的问题
document.querySelectorAll('.form-check-input').forEach(radio => {
  radio.addEventListener('change', e => {
    queryObj.status = e.target.value;
  })
})
document.querySelector('.form-select').addEventListener('change', e => {
  queryObj.channel_id = e.target.value;
})
document.querySelector('.sel-btn').addEventListener('click', () => {
  setArticleList();
})
/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
// 点击下一页
document.querySelector('.next').addEventListener('click', e => {
  if(queryObj.page < Math.ceil(totalCount / queryObj.per_page)) {
    queryObj.page++;
    setArticleList();
  }
})
// 点击上一页
document.querySelector('.last').addEventListener('click', e => {
  if(queryObj.page > 1) {
    queryObj.page--;
    setArticleList();
  }
})
/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */
document.querySelector('.art-list').addEventListener('click', async function(e) {
  if(e.target.classList.contains('del')) {
    const delId = e.target.parentNode.dataset.id;
    try {
      const res = await axios({
        url: `/v1_0/mp/articles/${delId}`,
        method: 'DELETE'
      })
      /* // 重新获取文章列表
      setArticleList(); */

      // 以上在最后一页删除最后一条时，显示内容为空，但是实际前面还有内容，这不符合习惯
      // 对于不是最后一页的，它删除一条后会刷新，自动补全
      const children = this.children;
      if(children.length === 1 && queryObj.page > 1) {
        queryObj.page--;
      }
      setArticleList();
    } catch(error) {
      console.dir(error);
    }
  }
})
// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector('.art-list').addEventListener('click', async function(e) {
  if(e.target.classList.contains('edit')) {
    const artId = e.target.parentNode.dataset.id;
    location.href = `../publish/index.html?id=${artId}`;
  }
})

